<template>
  <div>
    <button @click="msg='你好'">修改msg</button>
    <button @click="msg2='抠你鸡蛙，阿达西什么鬼'">修改msg2</button>
    <button @click=" $refs.fa.name ='rose' ">fuchuanzi</button>
    <h3 ref="h3">我是h3 -- {{ msg }} -- {{ msg2 }}</h3>
    
    <button @click="show = false">销毁father</button>
    <father v-if="show" ref="fa"/>
  </div>
</template>

<script>
import father from './components/father'

export default {
  components: {
    father
  },
  data() {
    return {
      show: true,
      msg: "hello",
      msg2: '抠你鸡蛙'
    };
  },

  // 创建前
  beforeCreate() {
    console.log("beforeCreate", this.msg); // undefined
  },

  // 创建后：还没有dom，但是有数据
  created() {
    console.log("created", this.msg); // hello
  },

  beforeMount() {
    console.log("beforeMount", document.querySelector("h3")); // null
  },
  mounted() {
    // console.log("mounted", document.querySelector("h3")); // <h3></h3>

    console.log('mounted', this.$refs.h3)
    // console.log('mounted', this.$refs.fa.name)

    // 妙用：极其方便的父传子
    // $refs.fa.name ='rose' 开发会用，但是不推荐
  },

  // 更新前
  beforeUpdate() {

    console.log(
      "数据发生改变，但是dom还没更新",
      this.msg,
      document.querySelector("h3").innerText
    );
  },

  // 更新后
  updated() {
  
    console.log(
      "数据发生改变，dom已经更新",
      this.msg,
      document.querySelector("h3").innerText
    );
  },
};
</script>

<style>
</style>